{% extends "exam_system/base_exam.html" %}
{% load exam_filters %}

{% block title %}答题详情 - {{ exam_room.name }}{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h4 class="mb-0">{{ exam_room.name }} - 答题详情</h4>
            <a href="{% url 'exam_system:exam_result' exam_room.id %}" class="btn btn-sm btn-outline-secondary">
                返回结果概览
            </a>
        </div>
        <div class="card-body">
            <div class="row mb-4">
                <div class="col-md-6">
                    <p><strong>考试时间：</strong>{{ exam_room.start_time|date:"Y-m-d H:i" }}</p>
                    <p><strong>考试科目：</strong>{{ exam_room.subject_1.name }}
                        {% if exam_room.subject_2 %}, {{ exam_room.subject_2.name }}{% endif %}
                        {% if exam_room.subject_3 %}, {{ exam_room.subject_3.name }}{% endif %}
                    </p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p><strong>得分：</strong>{{ exam_paper.total_score }} / {{ exam_room.total_score }}</p>
                    <p><strong>正确率：</strong>{{ correct_rate|floatformat:1 }}%</p>
                </div>
            </div>

            <div class="accordion" id="questionAccordion">
                {% for exam_question in exam_questions %}
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading{{ exam_question.id }}">
                        <button class="accordion-button {% if not forloop.first %}collapsed{% endif %}"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapse{{ exam_question.id }}"
                                aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}"
                                aria-controls="collapse{{ exam_question.id }}">
                            <div class="d-flex w-100 justify-content-between align-items-center">
                                <span>
                                    第{{ exam_question.question_number }}题
                                    <small class="text-muted">({{ exam_question.question.get_question_type_display }})</small>
                                </span>
                                {% if exam_question.is_correct %}
                                <span class="badge bg-success">正确</span>
                                {% else %}
                                <span class="badge bg-danger">错误</span>
                                {% endif %}
                            </div>
                        </button>
                    </h2>
                    <div id="collapse{{ exam_question.id }}"
                         class="accordion-collapse collapse {% if forloop.first %}show{% endif %}"
                         aria-labelledby="heading{{ exam_question.id }}"
                         data-bs-parent="#questionAccordion">
                        <div class="accordion-body">
                            <!-- 题目内容 -->
                            <div class="question-content mb-4">
                                <div class="card">
                                    <div class="card-body">
                                        {{ exam_question.question.content|safe }}
                                        {% if exam_question.question.image %}
                                        <div class="mt-3">
                                            <img src="{{ exam_question.question.image.url }}"
                                                 alt="题目图片"
                                                 class="img-fluid"
                                                 style="max-height: 300px;">
                                        </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>

                            <!-- 选项 -->
                            {% if exam_question.question.question_type != 'judge' %}
                            <div class="options mb-4">
                                <h6>选项：</h6>
                                <div class="card">
                                    <div class="card-body">
                                        {% with options=exam_question.question.options.splitlines %}
                                        <div class="row">
                                            {% for option in options %}
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input"
                                                           type="{% if exam_question.question.question_type == 'multiple' %}checkbox{% else %}radio{% endif %}"
                                                           disabled
                                                           {% if exam_question.answer and forloop.counter0|stringformat:"s" in exam_question.answer %}checked{% endif %}>
                                                    <label class="form-check-label
                                                        {% if forloop.counter0|stringformat:"s" in exam_question.question.answer %}text-success fw-bold{% endif %}
                                                        {% if exam_question.answer and forloop.counter0|stringformat:"s" in exam_question.answer and forloop.counter0|stringformat:"s" not in exam_question.question.answer %}text-danger{% endif %}">
                                                        {{ forloop.counter0|add:"A" }}. {{ option }}
                                                    </label>
                                                </div>
                                            </div>
                                            {% endfor %}
                                        </div>
                                        {% endwith %}
                                    </div>
                                </div>
                            </div>
                            {% else %}
                            <!-- 判断题 -->
                            <div class="options mb-4">
                                <h6>选项：</h6>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input"
                                                           type="radio"
                                                           disabled
                                                           {% if exam_question.answer == '1' %}checked{% endif %}>
                                                    <label class="form-check-label
                                                        {% if exam_question.question.answer == '1' %}text-success fw-bold{% endif %}
                                                        {% if exam_question.answer == '1' and exam_question.question.answer != '1' %}text-danger{% endif %}">
                                                        正确
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-check">
                                                    <input class="form-check-input"
                                                           type="radio"
                                                           disabled
                                                           {% if exam_question.answer == '0' %}checked{% endif %}>
                                                    <label class="form-check-label
                                                        {% if exam_question.question.answer == '0' %}text-success fw-bold{% endif %}
                                                        {% if exam_question.answer == '0' and exam_question.question.answer != '0' %}text-danger{% endif %}">
                                                        错误
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}

                            <!-- 分数信息 -->
                            <div class="score-info mt-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="text-muted">得分：{{ exam_question.score_obtained }} / {{ exam_question.score_total }}</span>
                                    <span class="badge {% if exam_question.is_correct %}bg-success{% else %}bg-danger{% endif %}">
                                        {% if exam_question.is_correct %}回答正确{% else %}回答错误{% endif %}
                                    </span>
                                </div>
                            </div>

                            <!-- 答案与解析 -->
                            <div class="answer-explanation">
                                <div class="card border-info">
                                    <div class="card-header bg-info text-white">
                                        <h6 class="mb-0">答案与解析</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-12">
                                                <p><strong>正确答案：</strong>
                                                    {{ exam_question.question.answer|format_answer:exam_question.question.question_type }}
                                                </p>

                                                <p><strong>你的答案：</strong>
                                                    {% if exam_question.answer %}
                                                        {{ exam_question.answer|format_answer:exam_question.question.question_type }}
                                                    {% else %}
                                                        未作答
                                                    {% endif %}
                                                </p>

                                                {% if exam_question.question.explanation %}
                                                <p><strong>解析：</strong></p>
                                                <div class="explanation-content">
                                                    {{ exam_question.question.explanation|safe }}
                                                </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
{% endblock %}